<template>
  <div id="poster">
      <el-form :model="RegisterForm" ref="RegisterForm" :rules="RegisterFormRules" class="Register-container" label-position="left" label-width="0px">
        <h2 class="Register_title">在线聊天系统 —— 注册</h2>
        <el-form-item prop="zhanghu">
          <el-input clearable prefix-icon="iconfont icon-denglu" type="text" v-model="RegisterForm.zhanghu" auto-complete="off" placeholder="账号"></el-input>
        </el-form-item>
        <el-form-item prop="nickname">
          <el-input clearable prefix-icon="iconfont icon-denglu" type="text" v-model="RegisterForm.nickname" auto-complete="off" placeholder="昵称"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input  clearable prefix-icon="iconfont icon-denglu-mima" type="password" v-model="RegisterForm.password" auto-complete="off" placeholder="密码"></el-input>
        </el-form-item>

        <el-form-item label-width="22%">
          <el-button type="infor" style="width: 36%;" v-on:click="rollback">取消</el-button>
          <el-button type="info" v-on:click="Register" style="width: 36%;">注册</el-button>
        </el-form-item>
      </el-form>
    </div>
</template>

<script>
  import { checkResData } from '../utils/selfInfoUtil.js'
export default {
  name: 'Register',
  data () {
    return {
      RegisterForm: {
      				  zhanghu: '',
      				  password: '',
      				  nickname: '',
      },
      // 表单验证
      				RegisterFormRules: {
      					nickname: [
      						{ required: true, message: '昵称不能为空！' ,trigger: 'change' }
      					],
      					zhanghu: [
      						{ required: true, message: '登录账号不能为空！' ,trigger: 'change' }
      					],
      					password: [
      						{ required: true, message: '登录密码不能为空！' ,trigger: 'change' }
      					]
      				}
    }
  },
  methods: {
    // 忘记密码
    			rollback() {
    				this.$router.push('/login')
    			},
          Register () {
            // 验证表单0
            			this.$refs.RegisterForm.validate(async valid => {
                    if (valid) {
                      this.$axios.post('/user/register',{
                        username: this.RegisterForm.zhanghu,
                        nickname: this.RegisterForm.nickname,
                        password: this.RegisterForm.password
                      },{emulateJSON: true})
                      .then(res => {
                        console.log(res)
                        if (checkResData(res.data.code,res.data.success)) {
                          this.$message.success(res.data.msg)
                          // 跳转到登录页面
                          this.rollback()
                        }else {
                          this.$message.error(res.data.msg)
                        }
                      })
                      .catch(err => {
                        this.$message.error("服务器溜了！ 已经去抓了")
                      })
                    }
                  })
          }
  }
}
</script>

<style>
  #poster {
  	background: url(../assets/images/bj.png) ;
      background-position: center;
      height: 100%;
      width: 100%;
      background-size: cover;
      position: fixed;

    }

    .Register-container {
      border-radius: 15px;
      background-clip: padding-box;
      margin: 10% auto;
      width: 70%;
      padding: 35px 35px 15px 35px;
      background: #d8e3e7;
      border: 1px solid #eaeaea;
      box-shadow: 0 0 25px #cac6c6;
    }

    .Register_title {
      margin: 0px auto 40px auto;
      text-align: center;
      color: #505458;
    }
</style>
